<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>童趣玩具店</title>
  <!-- 引入ElementUI的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    /*
        设置body样式

    */
    body{
      margin: 0px;/*设置上下左右空白距离为0*/
    }
    /*
        设置index-container  div样式
    */
    .index-container{
      margin: 0 auto;/*设置div居中*/
      width: 85%;/*设置宽度,使用百分比设置*/
      min-width: 1024px;/*设置最小宽度*/
    }



    /*
        ElementUI提供的样式
        设置el-header，el-footer两个标签的样式

    */
    .el-header, .el-footer {
      background-color: #606266;
      color: #333;
      line-height: 60px;
    }

    .el-header{
      background-color: lightblue;
      display: flex;
    }

    .el-footer{
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      font-family: 宋体;
      letter-spacing: 3px;
      color: white;

    }

    .el-header .logo{
      border: 0px solid red;
      width: 50%;
      height: 100%;
      padding-left: 50px;
    }

    .logo span{
      margin-top:-30px;
      position: relative;
      top:-17px;
      display: inline-block;
      border: 0px solid red;
      height: 100%;
      line-height: 60px;
      font-size: 30px;
      font-weight: bold;
    }

    .el-header .user_info{
      border: 0px solid blue;
      width: 50%;
      height: 100%;
      text-align: right;
      padding-right: 30px;
    }
    /**
      ElementUI提供的样式
      设置el-main样式
     */
    .el-main {
      /*background-color: #E9EEF3;*/
      color: #333;
    }






    a:link{
      text-decoration: none;
      color: dodgerblue;
      font-weight: bold;
    }
    a:visited{
      text-decoration: none;
      color: dodgerblue;
      font-weight: bold;
    }
    a:hover{
      color: red;
      font-weight: bold;
    }







  </style>

</head>
<body>
<div id="index-container" class="index-container">

  <el-container>
    <el-header>
      <div class="logo">
        <img src="/toyshopping/images/logo.png" style="height:60px ">
        <span>童趣玩具店</span>
      </div>
      <div class="user_info" >
        <!--
            v-if:vue的if指令
            当v-if为true时显示当前标签，为false不显示当前标签
        -->
        <div class="user_operate" v-if="curUser==null">
          <a href="register.html">用户注册</a>
          <a href="login.html">用户登录</a>
        </div>

        <div class="user_info_div" v-if="curUser!=null">
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{curUser.user_name}}</label>
                        </span>

          <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
        </div>

      </div>
    </el-header>
    <!--商品信息展示区-->
    <el-main>
      <div style="margin-bottom: 20px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <a href="/toyshopping">首页</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>订单</el-breadcrumb-item>

        </el-breadcrumb>
      </div>

      <div class="orderList">
        <el-table
                :data="orderList"
                style="width: 100%">
          <el-table-column
                  type="index"
                  label="序号"
                  width="180"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="order_id"
                  label="订单编号"
                  width="180"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="order_to_name"
                  label="收货人姓名"
                  width="180"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="order_to_address"
                  label="收货人地址"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="order_to_phone"
                  label="收货人电话"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="order_time"
                  label="下单时间"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="order_status"
                  label="状态"
                  align="center"
          >
            <template slot-scope="scope">
              <el-tag type="danger" effect="dark" v-if="scope.row.order_status==-1">交易失败</el-tag>
              <el-tag effect="dark" v-if="scope.row.order_status==0">未发货</el-tag>
              <el-tag effect="dark" type="warning" v-if="scope.row.order_status==1">已发货</el-tag>
              <el-tag effect="dark" type="success" v-if="scope.row.order_status==2">交易成功</el-tag>
            </template>
          </el-table-column>

          <el-table-column
                  prop="order_total_price"
                  label="订单总价"
                  align="center">
          </el-table-column>

          <el-table-column
                  label="操作"
                  align="center">
            <template slot-scope="scope">
              <el-link type="primary" :href="'showOrderDesc.html?order_id='+scope.row.order_id">查看详情</el-link>
            </template>
          </el-table-column>

        </el-table>
      </div>




    </el-main>
    <el-footer>童趣玩具店所有</el-footer>
  </el-container>

</div>

<script src="/toyshopping/js/vue.min.js"></script>
<script src="/toyshopping/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/toyshopping/js/sweetalert2.js"></script>
<script src="/toyshopping/js/qs.js"></script>
<script>
  /**
   * 创建Vue对象，并对vue进行配置
   * 在vue的构造器中配置
   */
  new Vue({
    //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
    el:'#index-container',
    data(){//vue的数据区，等同于java类中的属性
      return{
        curUser:null,//当前登录者对象
        orderList:[]//订单列表
      }
    },
    methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
      /**
       * 获得当前登录者信息
       */
      getCurUser(){
        //从sessionStorage中获得curUser的值，值为一个字符串
        let curUserStr = window.sessionStorage.getItem("curUser");
        if(curUserStr){
          //将JSON格式的字符串解析为一个JSON对象
          this.curUser = JSON.parse(curUserStr);
          // console.log(this.curUser.user_name);
        }

      },
      /**
       * 退出登录
       */
      exit(){
        //使用ajax向服务端发送退出请求
        axios.delete('user/exit')
                .then(response=>{
                  let result = response.data;
                  if(result.success){
                    //将浏览器的sessionStorage中存储的用户登录信息移除
                    window.sessionStorage.removeItem("curUser");//根据key移除对应的属性
                    //使用ElementUI的弹框组件实现
                    this.$message({
                      message: result.message,
                      type: 'success',
                      duration:500,//设置延迟关闭时间(毫秒)
                      onClose:()=>{//当弹框关闭后要执行的函数
                        this.curUser = null;//重置curUser对象为null
                      }
                    });
                  }
                })
                .catch(err=>{
                  alert(err);
                });
      },
      /**
       * 根据当前登录的用户获得订单信息
       */
      getOrderByUser(){
        axios.get('/toyshopping/orders/getOrderByUser?user_id='+this.curUser.user_id)
                .then(response=>{
                  this.orderList = response.data;
                })
                .catch(err=>{
                  alert(err);
                });
      },
      /**
       * 格式化订单状态
       */
      formatStatus(row){
        switch (row.order_status){
          case -1:
            return "<el-tag type=\"danger\">交易失败</el-tag>";
          case 0:
            return "<el-tag>未发货</el-tag>";
          case 1:
            return "<el-tag type=\"warning\">已发货</el-tag>";
          case 2:
            return "<el-tag type=\"success\">交易成功</el-tag>";
        }
      }




    },
    created(){/*在页面加载后自动执行*/

    },
    mounted(){/*DOM结构在内存中构建前执行*/
      this.getCurUser();//获得当前登录者信息
      this.getOrderByUser();


    }
  });
</script>
</body>
</html>